<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试</title>
		<style>
			body {
				margin: 0;
				padding: 0;
			}

			#main {
				height: 460px;
				width: 100%;
			}
		</style>
		<script>
			function addToTable() {
				var htmlStr = createTableNode('电脑', 6300);
				document.getElementById("main").innerHTML = htmlStr;
			}

			function createTableNode(name, price) {
				var trStr = "<table id='tab' border='1'>";
				// 构建十行
				for (var i = 0; i < 10; i++) {
					trStr += "<tr>" +
						"	  <td>" +
						"		<div class=''>" +
						"			<div class=''>" +
						"				<img src='img/mi10.PNG' />" +
						"				<div>" + name + "</div>" +
						"				<div>价格：$" + price + "</div>" +
						"			</div>" +
						"			<button onclick='add()'>添加</button>" +
						"		</div>" +
						"		</td>" +
						"	</tr>";
				}
				trStr += "</table>";
				
				return trStr;
			}

			var arrs = new Array()

			function initData() {
				for (var i = 0; i < 10; i++) {
					// 构造数据
					var goods = {
						id: i,
						url: "img/mi10.PNG",
						name: "手机00" + i,
						price: 11.11 + i
					}
					arrs.push(goods)
				}
				console.log("构造数据方法：", JSON.stringify(arrs))
			}
		</script>
	</head>
	<body>
		<button onclick="createTableNode()">创建新的DOM</button>
		<button onclick="addToTable()">添加到table</button>
		<div id="main" class=""></div>
	</body>
</html>
